import { ref,reactive,getCurrentInstance } from 'vue'
import * as echarts from "echarts";
// 这里是挂载到proxy实例的上边，可以实现全局调用
const { proxy } =  getCurrentInstance()
//  封装逻辑，规范 usexxx,表示使用某些功能
export const useFollow =async () => {
    const res = await proxy.$api.getTableData()
    tableData.value = res.tableData
 }
 const getCountData =async () => {
    const res = await proxy.$api.getCountData()
    console.log('res',res);
    
    countData.value = res
 }
 //observer 接收观察器实例对象
 const observer = ref(null)
 //这个是折线图和柱状图 两个图表共用的公共配置
 const xOptions = reactive({
       // 图例文字颜色
       textStyle: {
         color: "#333",
       },
       legend: {},
       grid: {
         left: "20%",
       },
       // 提示框
       tooltip: {
         trigger: "axis",
       },
       xAxis: {
         type: "category", // 类目轴
         data: [],
         axisLine: {
           lineStyle: {
             color: "#17b3a3",
           },
         },
         axisLabel: {
           interval: 0,
           color: "#333",
         },
       },
       yAxis: [
         {
           type: "value",
           axisLine: {
             lineStyle: {
               color: "#17b3a3",
             },
           },
         },
       ],
       color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
       series: [],
 })
 const pieOptions = reactive({
   tooltip: {
     trigger: "item",
   },
   legend: {},
   color: [
     "#0f78f4",
     "#dd536b",
     "#9462e5",
     "#a6a6a6",
     "#e1bb22",
     "#39c362",
     "#3ed1cf",
   ],
   series: []
 })
 // //请求图表数据并渲染的方法
 const  getChartData = async() => {
    const {orderData,userData,videoData} = await proxy.$api.getChartData()
    console.log('dor',orderData);
    
    // 第一个图标进行x轴和series赋值
    xOptions.xAxis.data = orderData.date
    xOptions.series = Object.keys(orderData.data[0]).map(val =>{
       return {
          name:val,
          data:orderData.data.map(item => item[val]),
          type:"line"
       }
    })
     //one               echarts.init方法初始化ECharts实例，需要传入dom对象
     const OneEcharts = echarts.init(proxy.$refs["echart"])
     //setOption方法应用配置对象
     OneEcharts.setOption(xOptions)
    // 第二个
    xOptions.xAxis.data = userData.map(item=>item.date)
    xOptions.series = [
       {
          name: '新增用户',
          data:userData.map(item=>item.new),
          type:'bar'
       },
       {
          name: '活跃用户',
          data:userData.map(item=>item.active),
          type:'bar'
       }
    ]
    const TwoEcharts =  echarts.init(proxy.$refs['userEchart'])
    TwoEcharts.setOption(xOptions)  
    // 第三个
        //对第三个图表的series赋值
       pieOptions.series = [
         {
           data: videoData,
           type: "pie",
         },
       ]
     //three
     const ThreeEcharts = echarts.init(proxy.$refs["videoEchart"])
     ThreeEcharts.setOption(pieOptions);
     //ResizeObserver 如果监视的容器大小变化，如果改变会执行传递的回调
     newFunction(OneEcharts, TwoEcharts, ThreeEcharts);
     //如果这个容器存在
     if (proxy.$refs["echart"]) {
         //则调用监视器的observe方法，监视这个容器的大小
       observer.value.observe(proxy.$refs["echart"]);
     }
     return { OneEcharts, TwoEcharts,ThreeEcharts }
 }